<!-- 客户端技巧心得详情页 -->
<template>
    <div>

        <div id="newDetail" v-if="newDetail && newDetail.length != 0">
            <div class="title">{{ newDetail.title }}</div>
            <div class="intro">
                <span>{{ newDetail.publDate | formatDate('YYYY-MM-DD') }}</span>
            </div>
            <div class="content" v-html="newDetail.content" v-if="newDetail.content.length != 0"></div>
            <div class="showTime" v-else>
                暂无内容
            </div>
            <div class="statement">
                免责声明：本终端所载数据仅供参考，若数据有误，以交易所发布数据为准，不对您构成投资建议。
            </div>
        </div>


        <div class="showTime" v-show="newDetail && newDetail.length == 0">暂无数据</div>

    </div>

</template>

<script>

import qs from 'qs';
import {getDetail, getInfo, getReport,getNotice} from "./api/index";

export default {
    data() {
        return {
            newDetail: null,
            queryData: {}
        };
    },
    mounted() {

        const href = window.location.href;
        const queryData = qs.parse(href.split("?")[1]);
        const type = queryData.type || 1;
        this.queryData = queryData;


        //1.公司新闻 2.研究报告 3.公司大事 4.公司公告
        switch (parseInt(type)){
            case 1:
                this.init();
                break;
            case 2:
                this.init2();
                break;
            case 3:
                this.init3();
                break;
            case 4:
                this.init4();
                break;
        }
    },
    methods: {
        //新闻公告
        async init(){
            await getDetail(this.queryData).then(res=>{

                this.newDetail = {
                    content: this.formatting(res.data.content),
                    title: res.data.title,
                    publDate: res.data.publDate
                }

            }).catch(err=>{

            });
        },
        //研究报告
        async init2(){
            await getReport(this.queryData).then(res=>{
                this.newDetail = {
                    content: this.formatting(res.data.content),
                    title: res.data.title,
                    publDate: res.data.publDate
                }
            }).catch(err=>{

            });
        },
        //公司大事
        async init3(){
            const url = window.location.href.match(/url=(.*)/);

            await getInfo(url[1]).then(res=>{
                this.newDetail = {
                    content: this.formatting(res.data[0].textContent),
                    title: res.data[0].title,
                    publDate: res.data[0].declareDate
                };
            }).catch(err=>{

            });
        },
        //公司公告
        init4(){
            getNotice(this.queryData).then(res=>{
                this.newDetail = {
                    content: this.formatting(res.data.txtContent),
                    title: res.data.title,
                    publDate: res.data.declareDate
                };
            })
        },
        //格式化换行
        formatting(html){
            if(html == null || html == '') return '';

            html = html.replace(/\n/g,"<br/>");
            html = html.replace(/\r\n/g,"<br/>");
            html = html.replace(/(^\s+)|(\s+$)|\s+/g,"       ")
            return html;
        }
    }
};
</script>
<style>
.content img {
    display: block;
    max-width: 90% !important;
}
</style>
<style lang="scss" scoped>
@import "./style/reset.css";

#newDetail {
    margin: 0 auto;
    padding: 24px 28px;
    max-width: 1200px;

    img {
        max-width: 100%;
    }

    .title {
        color: #333333;
        font-size: 20px;
        font-weight: bold;
        line-height: 42px;
        text-align: center;
    }

    .intro {
        text-align: center;
        color: #666666;
        line-height: 42px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 20px;

        span {
            margin-right: 5px;
        }
    }

    .content {
        color: #333333;
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
        word-break: break-all;
        white-space: pre-wrap;
    }

    .statement {
        margin-top: 20px;
        height: 46px;
        line-height: 46px;
        border-top: 1px solid #e0e0e0;
        color: #999999;
        font-size: 15px;
        font-weight: 500;
    }
}

.showTime {
    text-align: center;
    font-size: 0.5rem;
    font-weight: bold;
    color: #333333;
    padding-top: 0.8rem;
}
</style>
